<template>
  <div class="list-table">
    <div class="area-header">
      <!--      <span class="area-header-sign" />-->
      <!--      <span class="area-header-title">{{ $t('基金估值溯源') }}</span>-->
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('基金')" prop="name">
        <el-select v-model="fundId" :placeholder="$t('基金')" @change="initChart">
          <el-option v-for="fund in fundBaseList" :key="fund.id" :value="fund.id" :label="fund.fundName" />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="quarter">
        <DatePicker v-model="quarter" type="quarter" size="mini" style="width: 300px;" @change="onChange" />
      </el-form-item>
    </el-form>
    <div style="height:300px;position: relative;">
      <barLineChart v-if="barLineChart1.datas.length > 0" ref="barChart" :chart-data="barLineChart1" height="100%" />
      <div v-else class="noneData">
        <div>
          <svg-icon icon-class="none" class-name="none-icon" />
          <p>{{ $t('暂无数据') }}</p>
        </div>
      </div>
    </div>
    <div class="mt20" style="height:300px;position: relative;">
      <barLineChart v-if="barLineChart.datas.length > 0" ref="barChart" :chart-data="barLineChart" height="100%" />
      <div v-else class="noneData">
        <div>
          <svg-icon icon-class="none" class-name="none-icon" />
          <p>{{ $t('暂无数据') }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFundList, getCharts } from '@/api/fund/fundBase'
import barLineChart from '@/views/chart/barLineChart.vue'
import { compare } from '@/utils'
export default {
  components: {
    barLineChart
  },
  data() {
    return {
      queryParams: {},
      quarter: [],
      loading: true,
      fundId: undefined,
      fundBaseList: [],
      barLineChart: {
        valueFormatter: true,
        legend: true,
        legendLeft: 'center',
        yAxisName1: this.$t('金额单位'),
        yAxis2: true,
        yAxisName2: this.$t('金额单位'),
        datas: []
      },
      barLineChart1: {
        valueFormatter: true,
        legend: false,
        yAxisName1: this.$t('金额单位'),
        datas: []
      }
    }
  },
  created() {
    this.initFundBase()
  },
  methods: {
    initFundBase() {
      getFundList({}).then(res => {
        this.fundBaseList = res.rows
        if (!this.fundId && this.fundBaseList.length > 0) {
          this.$set(this, 'fundId', res.rows[0].id)
        }
        this.initChart()
      })
    },
    initChart() {
      if (this.fundId) {
        getCharts(this.fundId, 'valuationChange', {}).then(res => {
          if (res.data && res.data.length > 0) {
            var _data = res.data[0].data
            var xLabel = []
            var datas = []
            for (var key in _data) {
              xLabel.push({ name: key })
              var obj = { data: _data[key] }
              datas.push(obj)
            }
            this.barLineChart.xLabel = compare(xLabel, 'name').map(v => v.name)
            var series = datas[0].data.map(v => { return { data: [], name: v.nodeName, type: v.nodeName === '基金估值' ? 'line' : 'bar', stack: v.nodeName === '基金估值' ? '' : '1' } })
            for (let j = 0; j < series.length; j++) {
              series[j].data = []
              for (let i = 0; i < datas.length; i++) {
                series[j].data.push(datas[i].data[j].value)
              }
            }
            this.barLineChart.datas = series
          }
        })
        this.onChange()
      }
    },
    onChange(val) {
      var quarter = val || []
      getCharts(this.fundId, 'trace', { startDate: quarter[0], endDate: quarter[1] }).then(res => {
        var rows = res.data || []
        if (rows.length > 0) {
          this.barLineChart1.xLabel = rows.map(el => el.nodeName)
          this.barLineChart1.legend = false
          this.barLineChart1.seriesLabelShow = true
          this.barLineChart1.datas = [
            {
              type: 'bar',
              name: '',
              data: rows.map(ele => { return { value: ele.value, name: this.$t(ele.nodeName), sort: ele.sort, count: ele.count } })
            }
          ]
        } else {
          this.barLineChart1.datas = []
        }
      })
    }
  }
}
</script>

